<!-- 首页 -->
<script>
import { reactive } from '@/components/vue.api';
import { testRoutes } from '@/router/views'
import { top } from '@/router/menu'
// 路由
import router from '@/router'
// 描述页面
import HomeInfoPage from './info.vue'
import { bll } from 'quick.lib';

export default {
  components: {
    HomeInfoPage
  },
  setup () {

    /** 组件参数 */
    const the = reactive({
      tabs: {
        active: 0,
        list: [{
          title: '首页'
        }],
      }
    })

    const init = () => {
      //创建动态选项卡
      let _menu = testRoutes.map((item, index) => {
        return {
          icon: 'icon-menu',
          path: item.path,
          title: item.meta.title,
          dot: item.meta.dot,
          close: true,
        };
      });
      // 结合
      the.tabs.list = top.concat(_menu);
    }

    init();

    /**
     * 选项卡事件
     */
    const onTabEvent = (resp) => {
      console.log('onTabEvent:' + the.tabs.active, the.tabs.list.length, resp);
      switch (resp.cmd) {
        case 'click':
          // 切换回主路由
          if (resp.item.path) {
            router.push(resp.item.path)
          }
          break;
        case 'close':
          the.tabs.list.splice(resp.index, 1)
          the.tabs.active = resp.index - 1
          console.log('onTabEvent', the.tabs.active, the.tabs.list.length);
          // resp.close && 
          // the.tabs.list = resp.close(resp.index, the.tabs.list)
          // the.tabs.list.splice(the.tabs.list.length, 1)

          break;
        case 'tabDrag':
          console.log('tabDrag', resp.index);
          the.tabs.list = resp.change(the.tabs.list);
          the.tabs.active = resp.index;
          break;
      }
    }

    /** 新增 */
    const btnEvent = () => {
      // console.log('btnEvent')

      let _val = bll.randomCode(3)

      let _tab = {
        title: '新标签' + the.tabs.list.length,
        body: 'sadsadsadsa' + _val,
        model: {
          props: {
            value: _val
          },
          component: 'Input'
        },
        dot: true,
        close: true,
      }
      the.tabs.list.push(_tab)
      the.tabs.active = the.tabs.list.length - 1
    }

    return { the, onTabEvent, btnEvent }
  }
}

</script>

<template>
  <div class="home-page">
    <Tabs :list="the.tabs.list"
          :active="the.tabs.active"
          @onEvent="onTabEvent">
      <template #bar>
        home
      </template>
      <template #extra>
        <span class="tab-ext">
          <Icon type="icon-jiahao"
                @click="btnEvent" />
        </span>
      </template>
      <template #qv-tabs-0>
        <HomeInfoPage />
      </template>
    </Tabs>
    <router-view></router-view>
  </div>
</template>

<style lang="less">
.home-page {
  .qv-tabs {
    width: 100%;

    .tab-ext {
      display: inline-block;
      line-height: 2rem;
      margin-right: 0.5rem;
    }

    .icon-jiahao {
      // position: absolute;
      //  right: 0.1rem;
      // margin-top: 1rem;
      //
      border: 0.1rem solid coral;
      padding: 0.15rem;
      border-radius: 50%;
      color: coral;
      cursor: pointer;
    }
  }
}
</style>